<template>
  <el-dialog title="查看提问回答" :visible.sync="dialogVisible" width="30%" style="min-width: 400px;" @open="onDialogOpen">
    <div v-if="questions.length > 0">
      <p style="width: 100%; text-align: left;"><b>{{ questions[currentPage].answered_by.username }}</b>已经对你的以下提问做出回复</p>
      <el-input :value="questions[currentPage].content" type="textarea" :rows="3" readonly></el-input>
      <p style="width: 100%; text-align: left;">解答：</p>
      <el-input :value="questions[currentPage].answer" type="textarea" :rows="3" readonly></el-input>
      <div style="text-align: center; margin-top: 20px;">
        <el-button @click="emits('viewQuestionAnswer-canceled')">取消</el-button>
      </div>
    </div>
    <div v-else>
      <el-text class="mx-1">还没有问题被解答</el-text>
    </div>
    <div slot="footer" class="dialog-footer" style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px;">
      <el-pagination
          @current-change="page=>{currentPage=page-1}"
          background
          layout="prev, pager, next"
          :page-count="total"
          class="mt-4"
        />
    </div>
  </el-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { loadQuestionsByAnswer } from '../utils/apiQuestion.js'
import { myUserInfo } from '../utils/apiUser.js'

const dialogVisible = ref(true);
const currentPage = ref(0);
const total = ref(5)
const questions = ref([]);

const onDialogOpen = () => {
  loadQuestionsByAnswer(myUserInfo().id, true).then(res => {
    questions.value = res.data
    total.value = res.data.length
    currentPage.value = 0
  }).catch(error => {
  })
}

const emits = defineEmits(['viewQuestionAnswer-canceled'])

</script>